<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { showToast } from 'vant'
import { useCityStore } from '@/stores/store' // 导入store
const cityStore = useCityStore()
const router = useRouter()
// 当前城市
const currentCity = ref('武汉')
// 热门城市
const hotCities = [
  '武汉',
  '上海',
  '广州',
  '深圳',
  '杭州',
  '南京',
  '成都',
  '北京',
  '天津',
  '苏州',
  '西安',
  '重庆'
]

// 按字母分类的城市
const cityMap = {
  A: ['阿克苏', '阿拉善盟', '阿勒泰', '安康', '安庆', '安顺', '安阳', '鞍山', '澳门'],
  B: ['白城', '白山', '白银', '保定', '保山', '包头', '宝鸡', '巴彦淖尔', '巴中', '北海', '北京', '蚌埠', '本溪', '滨州', '博尔塔拉'],
  C: ['沧州', '长春', '长沙', '长治', '常德', '常州', '巢湖', '朝阳', '潮州', '承德', '成都', '赤峰', '池州', '重庆', '崇左', '楚雄'],
  D: ['大连', '大庆', '大同', '丹东', '德阳', '德州', '迪庆', '东莞', '东营', '都江堰'],
  F: ['防城港', '佛山', '福州', '抚顺', '抚州', '阜新', '阜阳'],
  G: ['甘南', '赣州', '广安', '广元', '广州', '贵港', '贵阳', '桂林'],
  H: ['哈尔滨', '海口', '海拉尔', '邯郸', '汉中', '杭州', '合肥', '和田', '河源', '菏泽', '贺州', '鹤壁', '鹤岗', '黑河', '衡水', '衡阳', '呼和浩特', '呼伦贝尔', '湖州', '葫芦岛', '惠州'],
  J: ['佳木斯', '吉安', '吉林', '济南', '济宁', '嘉兴', '嘉峪关', '江门', '焦作', '揭阳', '金昌', '金华', '锦州', '晋城', '晋中', '荆门', '荆州', '景德镇', '九江', '酒泉'],
  K: ['喀什', '开封', '克拉玛依', '昆明', '昆山'],
  L: ['拉萨', '来宾', '莱芜', '兰州', '廊坊', '乐山', '丽江', '丽水', '连云港', '凉山', '辽阳', '辽源', '聊城', '林芝', '临沧', '临汾', '临高', '临夏', '临沂', '柳州', '六安', '六盘水', '龙岩', '陇南', '娄底', '泸州', '吕梁', '洛阳', '漯河'],
  M: ['马鞍山', '茂名', '眉山', '梅州', '绵阳', '牡丹江'],
  N: ['内江', '南昌', '南充', '南京', '南宁', '南平', '南通', '南阳', '宁波', '宁德'],
  P: ['盘锦', '攀枝花', '平顶山', '平凉', '萍乡', '莆田', '濮阳'],
  Q: ['齐齐哈尔', '七台河', '黔东南', '黔南', '黔西南', '钦州', '秦皇岛', '青岛', '清远', '庆阳', '琼海'],
  R: ['日喀则', '日照'],
  S: ['三门峡', '三明', '三亚', '上海', '上饶', '韶关', '邵阳', '绍兴', '深圳', '沈阳', '十堰', '石河子', '石家庄', '石嘴山', '双鸭山', '朔州', '四平', '松原', '苏州', '宿迁', '宿州', '绥化'],
  T: ['泰安', '泰州', '太原', '台州', '唐山', '天津', '天水', '铁岭', '通化', '通辽', '铜川', '铜陵', '铜仁'],
  W: ['潍坊', '威海', '渭南', '温州', '文山', '乌海', '乌兰察布', '乌鲁木齐', '无锡', '芜湖', '梧州', '武汉', '武威'],
  X: ['西安', '西宁', '锡林郭勒', '厦门', '咸宁', '咸阳', '湘潭', '湘西', '襄阳', '孝感', '忻州', '新乡', '新余', '信阳', '兴安盟', '邢台', '徐州', '许昌', '宣城'],
  Y: ['雅安', '烟台', '盐城', '延安', '延边', '扬州', '阳江', '阳泉', '伊春', '伊犁', '宜宾', '宜昌', '宜春', '益阳', '银川', '鹰潭', '营口', '永州', '榆林', '玉林', '玉溪', '岳阳', '云浮', '运城'],
  Z: ['枣庄', '湛江', '张家界', '张家口', '张掖', '漳州', '昭通', '肇庆', '镇江', '郑州', '中山', '中卫', '舟山', '周口', '珠海', '株洲', '驻马店', '资阳', '淄博', '自贡', '遵义']
}

// 返回上一页
const onClickLeft = () => {
  router.back()
}

// 选择城市
const selectCity = (city) => {
  cityStore.updateCity(city) // 更新store中的城市和ID
  showToast(`已选择: ${city}`)
  // 这里可以添加城市选择后的业务逻辑
  router.back()
}
</script>
<template>
  <div class="city-select">
    <!-- 导航栏 -->
    <van-nav-bar
      title="城市选择"
      left-text="关闭"
      left-arrow
      @click-left="onClickLeft"
      fixed
    />
    
    <!-- 城市列表 -->
    <van-index-bar :sticky-offset-top="46">
      <!-- 当前定位城市 -->
      <div class="current-city">
        <div class="label">当前定位城市</div>
        <van-tag type="primary" size="large">{{ currentCity }}</van-tag>
      </div>

      <!-- 热门城市 -->
      <div class="hot-cities">
        <div class="label">热门城市</div>
        <div class="grid">
          <van-tag 
            v-for="city in hotCities" 
            :key="city"
            size="large"
            plain
            @click="selectCity(city)"
          >{{ city }}</van-tag>
        </div>
      </div>

      <!-- A开头城市 -->
      <van-index-anchor index="A" />
      <van-cell 
        v-for="city in cityMap.A" 
        :key="city"
        :title="city"
        @click="selectCity(city)"
      />

      <!-- B开头城市 -->
      <van-index-anchor index="B" />
      <van-cell 
        v-for="city in cityMap.B" 
        :key="city"
        :title="city"
        @click="selectCity(city)"
      />

      <!-- C开头城市 -->
      <van-index-anchor index="C" />
      <van-cell 
        v-for="city in cityMap.C" 
        :key="city"
        :title="city"
        @click="selectCity(city)"
      />

      <!-- D开头城市 -->
      <van-index-anchor index="D" />
      <van-cell 
        v-for="city in cityMap.D" 
        :key="city"
        :title="city"
        @click="selectCity(city)"
      />

      <!-- F开头城市 -->
      <van-index-anchor index="F" />
      <van-cell 
        v-for="city in cityMap.F" 
        :key="city"
        :title="city"
        @click="selectCity(city)"
      />

      <!-- G开头城市 -->
      <van-index-anchor index="G" />
      <van-cell 
        v-for="city in cityMap.G" 
        :key="city"
        :title="city"
        @click="selectCity(city)"
      />

      <!-- H开头城市 -->
      <van-index-anchor index="H" />
      <van-cell 
        v-for="city in cityMap.H" 
        :key="city"
        :title="city"
        @click="selectCity(city)"
      />

      <!-- J开头城市 -->
      <van-index-anchor index="J" />
      <van-cell 
        v-for="city in cityMap.J" 
        :key="city"
        :title="city"
        @click="selectCity(city)"
      />

      <!-- K开头城市 -->
      <van-index-anchor index="K" />
      <van-cell 
        v-for="city in cityMap.K" 
        :key="city"
        :title="city"
        @click="selectCity(city)"
      />

      <!-- L开头城市 -->
      <van-index-anchor index="L" />
      <van-cell 
        v-for="city in cityMap.L" 
        :key="city"
        :title="city"
        @click="selectCity(city)"
      />

      <!-- M开头城市 -->
      <van-index-anchor index="M" />
      <van-cell 
        v-for="city in cityMap.M" 
        :key="city"
        :title="city"
        @click="selectCity(city)"
      />

      <!-- N开头城市 -->
      <van-index-anchor index="N" />
      <van-cell 
        v-for="city in cityMap.N" 
        :key="city"
        :title="city"
        @click="selectCity(city)"
      />

      <!-- P开头城市 -->
      <van-index-anchor index="P" />
      <van-cell 
        v-for="city in cityMap.P" 
        :key="city"
        :title="city"
        @click="selectCity(city)"
      />

      <!-- Q开头城市 -->
      <van-index-anchor index="Q" />
      <van-cell 
        v-for="city in cityMap.Q" 
        :key="city"
        :title="city"
        @click="selectCity(city)"
      />

      <!-- R开头城市 -->
      <van-index-anchor index="R" />
      <van-cell 
        v-for="city in cityMap.R" 
        :key="city"
        :title="city"
        @click="selectCity(city)"
      />

      <!-- S开头城市 -->
      <van-index-anchor index="S" />
      <van-cell 
        v-for="city in cityMap.S" 
        :key="city"
        :title="city"
        @click="selectCity(city)"
      />

      <!-- T开头城市 -->
      <van-index-anchor index="T" />
      <van-cell 
        v-for="city in cityMap.T" 
        :key="city"
        :title="city"
        @click="selectCity(city)"
      />

      <!-- W开头城市 -->
      <van-index-anchor index="W" />
      <van-cell 
        v-for="city in cityMap.W" 
        :key="city"
        :title="city"
        @click="selectCity(city)"
      />

      <!-- X开头城市 -->
      <van-index-anchor index="X" />
      <van-cell 
        v-for="city in cityMap.X" 
        :key="city"
        :title="city"
        @click="selectCity(city)"
      />

      <!-- Y开头城市 -->
      <van-index-anchor index="Y" />
      <van-cell 
        v-for="city in cityMap.Y" 
        :key="city"
        :title="city"
        @click="selectCity(city)"
      />

      <!-- Z开头城市 -->
      <van-index-anchor index="Z" />
      <van-cell 
        v-for="city in cityMap.Z" 
        :key="city"
        :title="city"
        @click="selectCity(city)"
      />
    </van-index-bar>
  </div>
</template>

<style scoped>
.city-select {
  padding-top: 46px;
  min-height: 100vh;
  background: #f7f8fa;
}

.current-city,
.hot-cities {
  margin: 16px;
}

.label {
  margin-bottom: 12px;
  font-size: 14px;
  color: #969799;
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.van-tag {
  width: 100%;
  text-align: center;
  cursor: pointer;
}

:deep(.van-index-bar__sidebar) {
  right: 0;
}
</style>